<template>
  <div class="address">
      <div class="list" v-for="(item,index) in list" :key="index">
          <div class="list_l">
              <div class="list_t">
                  <div class="name">{{item.name}}</div>
                  <div class="phone">{{item.phone}}</div>
              </div>
              <div class="list_b">
                  <div class="info">
                    <span>{{item.province}}</span> 
                    <span>{{item.city}}</span> 
                    <span>{{item.area}}</span> 
                    {{item.address}} 
                  </div> 
              </div>
          </div>
          <div class="list_r">
            <div class="edit">编辑</div>
          </div>
      </div>
      <div class="footer">
          <div class="add" @click="add">
            <image src="/static/images/tianjia.png" /> 
            <div>添加新地址</div>
          </div> 
      </div>
  </div>
</template>

<script>

export default {        
  data () {
    return {
        list:[
          {name:'王先生',phone:'15206445987',province:'浙江省',city:'杭州市',area:'滨江区',address:'西兴街道迎春小区1幢1单元203室'},
          {name:'王先生',phone:'15206445987',province:'浙江省',city:'杭州市',area:'滨江区',address:'西兴街道迎春小区1幢1单元203室'}
        ]
    }
  },
  methods: {
      add(){
        wx.navigateTo({ 
          url: '/pages/add_address/main'
        })
      }
  },
  onLoad(){
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style  lang="less">
    html{
      background: #f5f5f5;
    }
    .address{
      .list{
        width: 100%;
        height: 156rpx;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 22rpx 0 0 28rpx;
        box-sizing: border-box;
        margin-top: 20rpx;
        justify-content: space-between;
        .list_l{
          .list_t{
            display: flex;
            font-size:28rpx;
            font-weight: 500;
            color: #000;
            margin-bottom: 10rpx;
            .name{
              margin-right: 36rpx;
            }
          }
          .list_b{
            width: 594rpx;
            font-size:24rpx;
            color: #999;
            span{
              margin-right: 10rpx;
            }
          }
        }
        .list_r{
          width: 110rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          font-weight:500;
          font-size: 26rpx;
          color:rgba(255,61,79,1);
          border-left: 2rpx solid #707070;
        }
      }
      .footer{
        margin-top: 14rpx;
        width: 100%;
        height: 60rpx;
        display: flex;
        justify-content: flex-end;
        padding-right: 28rpx;
        box-sizing: border-box;
        .add{
          display: flex;
          width: 200rpx;
          height: 60rpx;
          align-items: center;
          padding: 0 16rpx 0 14rpx;
          box-sizing: border-box;
          color: #FF3D4F;
          font-size: 28rpx;
          border: 2rpx solid #FF3D4F;
          border-radius:6rpx;
          image{
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
          }
          div{
            white-space: nowrap;
          }
        }
      }
    }
 
</style>
